<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="展品信息" back></Header>
		<view class="wapper">
			<view class="header">
				<view class="header-tab">
					<view class="header-item">
						<div class="uni-flex">
							<input class="uni-input" style="text-align: left;" placeholder="请输入展品名称"
								v-model="searchParams.ZhanPinName" @confirm="search"></input>
						</div>
					</view>
					<view class="header-item">
						<picker mode="selector" :range="types" range-key="TypeName" @change="changeType"
							:value="typeIndex">
							<div class="uni-flex">
								<view class="uni-input">{{typeIndex>=0 ? types[typeIndex].TypeName:''}}</view>
							</div>
						</picker>
						<view class="picker-tip">
							<image src="../../static/icons/arrow.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<template v-if="list.length > 0">
					<view class="content-item" v-for="(v,k) in list" :key="k" @click="toDetail(v)">
						<view class="content-item-top">
							<image :src="getUrl(v.ImageUrl)"></image>
						</view>
						<view class="content-item-bottom">
							<view class="content-item-bottom-top">
								{{getCompany(v.QiYeID)}}
							</view>
							<view class="content-item-bottom-bottom">
								{{v.ZhanPinName}}
							</view>

						</view>
					</view>
				</template>
				<u-empty v-else descript="暂无数据" style="margin: 0 auto;"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				show: false,
				show2: false,
				list: [],
				types: [],
				companys: [],
				typeIndex: 0,
				companyIndex: 0,
				searchParams: {
					ZhanPinTypeName: '',
					QiYeName: '',
					ZhanPinName: '',
					PageSize:9999,
					PageIndex:1
				},
			}
		},
		methods: {
			// changeCompany(v) {
			// 	this.companyIndex = v.detail.value
			// 	this.searchParams.QiYeID = this.companys[this.companyIndex].ZhangShangID
			// 	this.search()
			// },
			changeType(v) {
				this.typeIndex = v.detail.value
				this.searchParams.ZhanPinTypeName = this.types[this.typeIndex].TypeName == '全部' ? '' : this.types[this.typeIndex].TypeName
				this.search()
			},
			async search() {
				let res = await this.$api.getNavs7(this.searchParams)
				this.list = res.UserData
			},
			getCompany(v) {
				let a = this.companys.find((s) => s.ZhangShangID == v)
				return a.ZhangShangName
			},
			toDetail(v) {
				let str = encodeURIComponent(JSON.stringify({img:v.ImageUrl,head:v.ZhanPinName,content:v.Content}))
				uni.navigateTo({
					url: '../index/detail?title=展品信息&data=' + str
				})
			}
		},
		async mounted() {
			let res2 = await this.$api.getNavs7Types()
			this.types = [{
				TypeID: '',
				TypeName: '全部'
			}, ...res2.UserData]
			let res3 = await this.$api.getNavs6()
			this.companys = [{
				ZhangShangID: '',
				ZhangShangName: '全部'
			}, ...res3.UserData]
			this.search()
			// this.searchParams.QiYeID = this.companys[0].id
			// this.searchParams.ZhanPinTypeName = this.types[0].TypeID
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.uni-flex {
		display: flex;
	}

	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			padding: 20rpx;
			z-index: 100;
			margin-top: -280rpx;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;
			display: flex;
			flex-direction: column;

			.header {
				.header-tab {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx;
					// flex-wrap: wrap;

					.header-item {
						// width: 100%;
						height:40rpx;
						flex:1;
						text-align: center;
						margin-right: 20rpx;
						border: 1px solid #dcdcfc;
						padding: 20rpx;
						border-radius: 10rpx;
						background: #fff;
						position: relative;
						font-size: 28rpx;

						.picker-tip {
							position: absolute;
							right: 20rpx;
							top: 50%;
							transform: translateY(-50%);

							image {
								width: 20rpx;
								height: 14rpx;
							}
						}
					}
				}
			}

			.content {
				flex: 1;
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				overflow: auto;

				.content-item {

					padding: 26rpx 22rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.35);
					border-radius: 33rpx;
					width: 42%;
					margin-right: 19rpx;
					margin-bottom: 19rpx;
					height: 350rpx;
					&:nth-child(2n) {
						margin-right: 0;
					}

					.content-item-top {
						padding: 20rpx 0;

						image {
							width: 100%;
							height: 200rpx;
						}

						border-bottom: 1px solid #000000;
					}

					.content-item-bottom {
						margin-top: 20rpx;

						.content-item-bottom-top {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.content-item-bottom-bottom {
							margin-right: 26rpx;
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>